import React, { Component } from 'react';
import Css from "./index.module.scss";
import { connect } from "react-redux";
// 可以给当前的组件 添加 history match location ... 
import {withRouter  } from "react-router-dom";

class index extends Component {

  // 默认属性
  static defaultProps={
    // 右侧的字体图标的颜色
    iconColor:"#fff"
  }

  render() { 
    const {history}=this.props;
    return (
      <div className={Css.city_input_row} >
        <div className={Css.city_input}>
          <div onClick={()=>history.push("/citySelect")} className={Css.city_name}>{this.props.cityName}</div>
          <div className={Css.city_search}>
            {/* 字体图标身上的class 有些是全局类名 */}
            <i className={
              ['iconfont',
                'icon-seach',
                Css.city_input_icon_search
              ].join(' ')
            }></i>
            <span>请输入小区或地址</span>
          </div>
        </div>
        <div onClick={()=>history.push("/mapFound")} className={Css.city_input_row_icon}>
          <i 
          style={{color:this.props.iconColor}}
          className={
            [
              'iconfont',
              'icon-map',
              Css.city_input_icon_map
            ].join(' ')
          }></i>
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})


//  把我们的组件包起来即可
// export default connect(mapStateToProps)(withRouter(index));

//  connect withRouter 两个 可以增强组件的函数即可  props属性进行增强  .. 
// connect 增强组件 获取 全局数据的功能
// withRouter 可以增强组件 获取 路由信息的 功能 
export default withRouter(connect(mapStateToProps)(index));


